{extend name="common/base_page" /}

{block name="title"}健康档案管理{/block}

{block name="jscssfile"}{/block}

{block name="css"}
<style type="text/css">
body{ background: #ffffff; height:100%;}
.layui-fluid {
    padding:0px 15px 10px 15px;
}
.layui-tab {
    margin: 0 0;
}
.layui-tab-content{  
  padding:0px;
}
#bar_box_one{
  padding: 0px 0px 5px 0px;
  margin-bottom:0px;
}
.layui-table, .layui-table-view { margin:0; }
.layui-form-item .layui-input-inline { margin-right: 0px; }
</style>
{/block}

{block name="body"}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">

            <div class="layui-form-item layui-form" id="bar_box_one">
                <input type="checkbox" name="listmode" value="1" lay-skin="switch" lay-text="卡片|列表" lay-filter="listmode-event" checked>
                <div class="layui-input-block" style="float: right;">
                  <form class="layui-form" method="post" action="{:url('index/user.health_record/to_excel')}" id="excelForm">
                      <div class="layui-inline" style="margin-right:0px;">
                        <label class="layui-form-label" style="width:30px;padding: 9px 15px 9px 0;">&nbsp;</label>
                        <div class="layui-input-inline" style="width:130px;">
                          <input type="checkbox" id="zero_noshow" name="zero_noshow" value="1" title="零库存不显示" lay-skin="primary">
                        </div>
                      </div>
                      <div class="layui-inline">
                        <label class="layui-form-label" style="width:30px;padding: 9px 15px 9px 0;">类型</label>
                        <div class="layui-input-inline">
                          <select id="drug_type" name="drug_type">
                              <option value="ALL">全部</option>
                              {volist name="ypkc_type_list" id="vo"}
                              <option value="{$vo.id}">{$vo.name}</option>
                              {/volist}
                          </select>
                        </div>
                      </div>
                      <div class="layui-inline">
                        <div class="layui-input-inline">
                          <input type="text" name="keyword" id="keyword" maxlength="10" placeholder="名称/拼音码/五笔码" autocomplete="off" class="layui-input">
                        </div>
                      </div>
                      <div class="layui-inline">
                          <a class="layui-btn layui-btn-normal" onclick="_p = 1;_loadList();">搜索</a>
                          <a class="layui-btn layui-btn-normal" onclick="_Index.downExcel('#excelForm');">导出</a>
                      </div>
                    </form>
                </div>
            </div>
            <div class="layui-tab-content">
                  <div class="layui-tab-item itembox-card">
                      
<div class="layui-col-md3">
    <div class="user-cardlist-box">
          <div class="user-list-top">
              <img src="/static/icon_nopic.png" class="user-avatar" onerror="__imgErr();"/>
              <div class="right-info">
                  <h4>姓名</h4>
                  <p>2岁8月 女</p>
                  <p>2021-09-16 12:11:43</p>
              </div>
          </div>
          <ul class="user-list-bottom">
              <li><a href="#">按扭01</a></li>
              <li><a href="#">按扭02</a></li>
          </ul>
    </div>
</div>



























                  </div>
                  <div class="layui-card cardpage">
                      <div class="layui-card-body" id="layer_page_box" style="padding: 5px 15px 0px 15px;"></div>
                  </div>


                  <div class="layui-tab-item itembox-list">
                      <table id="LAY-app-content-comm" lay-filter="LAY-app-content-comm"></table>
                  </div>
            </div>

        </div>
    </div>
</div>
{/block}

{block name="script"}
<script type="text/html" id="table-content-com">
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail"><i class="layui-icon layui-icon-form"></i>档案详情</a>
</script>
<script type="text/javascript">
var _listmode = 1, _p = 1;
$(function(){
  var _h = $(window).height()-$('.layui-tab-content').offset().top-55;
  $('.itembox-card').css({height:_h+'px',"overflow-y":"scroll"});





  setTimeout(function(){
    //_listmode=1=卡片|列表_listmode=0
    layform.on('switch(listmode-event)', function(data){
        if(data.elem.checked)
        {
            _listmode = 1; //卡片
        }else{
            _listmode = 0; //列表
        }
        _p = 1;
        _loadList();
    });
    _loadList();
  },50);
});
//加载数据
function _loadList()
{
  var _zero_noshow = 0;
  if($('#zero_noshow').prop('checked')) _zero_noshow = 1;
  var param = {
      drugtype: $.trim($('#drug_type').val()),
      keyword: $.trim($('#keyword').val()),
      zeronoshow: _zero_noshow,
      page:_p
  };
  if(_listmode == 1) //卡片
  {
      $('#LAY-app-content-comm').empty();
      $('.itembox-list').hide();
      $('.cardpage').show();
      $('.itembox-card').show();
      var _h = $(window).height()-$('.layui-tab-content').offset().top-55;
      $('.itembox-card').css({height:_h+'px',"overflow-y":"scroll"});
      _loadCardData(param);
  }else{ //列表
      $('.cardpage').hide();
      $('.itembox-card').empty();
      $('.itembox-card').hide();
      var _h = $(window).height()-$('.layui-tab-content').offset().top;
      $('.itembox-list').css({height:_h+'px'});
      $('.itembox-list').show();
      _loadTableData(param);
  }
}
//加载卡片数据
function _loadCardData(param)
{
  _Index.ajax("{:url('index/user.health_record/index')}",param,function(d){
      if(d.code == 0)
      {
        __showLoadingBox('请稍候...');
        var _html = '';
        $.each(d.data,function(i,v){
          var _detailUrl = "{:url('index/user.health_record/detail')}?uid=" + v.id + "&name=" + v.name;
          _html += '<div class="layui-col-md3">\
                        <div class="user-cardlist-box">\
                              <div class="user-list-top">\
                                  <img src="/static/icon_nopic.png?v=1" class="user-avatar" onerror="__imgErr();"/>\
                                  <div class="right-info">\
                                      <h4>'+v.name+'</h4>\
                                      <p>2岁8月 女</p>\
                                      <p>2021-09-16 12:11:43</p>\
                                  </div>\
                              </div>\
                              <ul class="user-list-bottom">\
                                  <li><a href="javascript:;" onclick="window.parent.setNewUrl(\''+_detailUrl+'\');">档案详情</a></li>\
                              </ul>\
                        </div>\
                    </div>';
        });
        $('.itembox-card').empty().append(_html);
        _Index.setPagebar(d.page,d.limit,d.count,function(currPage){
            _p = currPage;
            _loadList();
        });
        __hideLoadingBox();
      }else{
        layer.msg(d.msg, {time: 2000,anim: 4});
      }
  },'请稍候...');
}
//加载table列表数据
function _loadTableData(param)
{
      __showLoadingBox('请稍候...');
      laytable.render({
          elem: '#LAY-app-content-comm'//指定表格元素
          ,url:"{:url('index/user.health_record/index')}"
          ,method:'post'  //提交方式
          ,where:param //post json数据
          ,page: {layout: ['count', 'prev', 'page', 'next', 'skip']}
          ,skin: 'line '  //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
        　,even: true    //隔行换色
          ,limit: 20     //每页默认显示的数量
          ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
          ,height: $('.itembox-list').height() //表格高度，layui 2.2.1 新增 , full-100 为适应最大高度或其它数值500
          ,cols: [[
            {field:'name', width:120, title: '患者姓名',sort: true}
            ,{field:'user_number', minwidth:200, title: '病历号'}
            ,{field:'phone', width:120, align:'center', title: '手机号',sort: true}
            ,{field:'age', width:120, align:'center', title: '年龄',sort: true}
            ,{field:'sex', width:100, align:'center', title: '性别',sort: true}
            ,{field:'sex', width:300, title: '诊断'}
            ,{field:'sex', width:130, align:'center', title: '最近就诊日期'}
            ,{field:'sex', width:130, align:'center', title: '标签',sort: true}
            ,{fixed: 'right', width: 200, align:'center', title: '操作', toolbar: '#table-content-com'}
          ]]
          ,done:function(datalist,curr,page){
              __hideLoadingBox();
          }
      });
      laytable.on('tool(LAY-app-content-comm)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
          var _data = obj.data; //获得当前行数据
          var _event = obj.event; //获得 lay-event 对应的值
          if(_event === 'detail'){ //查看详情
            //跳转到新的连接
            __showLoadingBox('请稍候...');
            window.parent.setNewUrl("{:url('index/user.health_record/detail')}?uid=" + _data.id + "&name=" + _data.name);
          }
      });
}
</script>
{/block}